<template>
	<div class="line_chart" :id="idName">折线图</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, toRefs, computed, onMounted, watch } from "vue";
import {
  paramsFun,
  $fullUrl,
  $toTime,
  $banseUrl,
  $check_action,
  $getUrlParams,
} from "@/utils/utils.js";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const emit = defineEmits(["changeTab"]);
const props = defineProps({
	idName: {
		type: String,
		default: "lineChart"
	},
	title: {
		type: String,
		default: "XXX折线图"
	},
	vm: {
		type: Object,
		default: function() {
			return {
				xAxis: "xAxis",
				names: "names",
				values: "values",
			};
		},
	},
	timeout:{
		type: Number,
		default: 2000
	},
	color:{
		type: Array,
		default:[]
	}
});
let { idName, title, vm,timeout,color } = toRefs(props);
let option=ref({
	title: {
		text: "XXX折线图",
		left: "center",
	},
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: vm.value.names,
		y: 'bottom'
	},
	grid: {
		left: "3%",
		right: "10%",
		bottom: "14%",
		containLabel: true,
	},
	toolbox: {
		feature: {
			saveAsImage: {},
		},
	},
	xAxis: [{
		type: 'category',
    boundaryGap: false,
    data: vm.value.xAxis
	}],
	yAxis: [{
		type: 'value'
	}],
 series: [
    {
			name: '点赞数',
      data: vm.value.values,
      type: 'line',
      areaStyle: {}
    }
  ]
})
const series = computed(() => {
	let list = vm.value.names;
	let values = vm.value.values;
	let seriesobj = [];
		let dict_type = {
				areaStyle: {},
				type: 'line',
				data: vm.value.values
		}
		seriesobj.push(dict_type);

});
let init_chart = () => {
	let optionObj = option.value;

	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(series, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	if(color.value.length > 0){
		option.value.color = color.value
	}
	setTimeout(()=>{
			init_chart();
	},200)

});



</script>
